import { ProTable, Button } from '@/components/vendor';
import { ProTableProps } from '@ant-design/pro-table';

export default function IndexPage() {
  const columns:ProTableProps<any, any>['columns'] = [
    {
      key: 'name',
      dataIndex: 'name',
      title: '名字',
      width: 200,
    },
    {
      key: 'age',
      dataIndex: 'age',
      title: '年龄',
      width: 200,

    },
    {
      key: 'sex',
      dataIndex: 'sex',
      title: '性别',
      width: 200,
      valueEnum: {
        man: {text: '男'},
        faleman: {text: '女'}
      }
    },
    // {
    //   key: 'create_time',
    //   dataIndex: 'create_time',
    //   title: '创建时间',
    //   width: 200,
    //   valueType: 'date',
    // },
  ];

  const dataSource:ProTableProps<string, any>['dataSource'] = []

  const action = {} as ProTableProps<any, any>['actionRef']

  return (
    <div>
      <ProTable
        actionRef={action}
        columns={columns}
        dataSource={dataSource}
        request={async (params) => {
          const res = [{
            id: 1,
            name: '我的',
            age: 22,
            sex: '男'
          },
            {
              id: 2,
              name: '我的',
              age: 22,
              sex: '男'
            },
            {
              id: 3,
              name: '我的',
              age: 22,
              sex: '男'
            }]

          return {
            data: res
          }
        }}
        toolbar={{
          menu: {
            items: [
              {
                key: 1,
                label: '待付款'
              },
              {
                key: 2,
                label: '已过期'
              },
              {
                key: 3,
                label: '使用中'
              }
            ]
          },
          actions: [
            <Button key={'add'} variant={'outlined'}>
              新增
            </Button>,
          ],
        }}
      />
    </div>
  );
}
